<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Steam Hot Deals</title>
    <script type="text/javascript">
        var topuri = "http://store.steampowered.com/search/tab?tab=TopSellers&start=0&count="
        var dealuri = "http://store.steampowered.com/search/tab?tab=Discounts&start=0&count="

        var quantity = "10";

        var uri = dealuri + quantity;

        var req;

        function setColor(element, discount) {
            var fores = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"];
            var backs = ["#4C6B22", "#4C6B22", "#b8860b", "#ee7600", "#cd0000"];

            element.style.foreground = fores[Math.floor(discount * fores.length / 100)];
            element.style.background = backs[Math.floor(discount * backs.length / 100)];
        }

        function parseInfo(body) {
            listbox.innerHTML = body;

            // Color discounts.
            var elems = document.getElementsByTagName("div");
            for (i in elems) {
                if ("tab_discount discount_pct" == elems[i].className) {
                    var discount = -parseInt(elems[i].innerHTML);

                    elems[i].style.background = setColor(elems[i], discount);
                }
            }
			
            // Open in new window.
			elems = document.getElementsByTagName("a");
            for (i in elems) {
                elems[i].target = "_blank";
            }
        }

        // AJAX request.
        function ajaxResponse() {
            if (req.readyState == 4) {
                parseInfo(req.responseText);
            }
        }
        function ajaxRequestInfo() {
            req = new XMLHttpRequest();
            req.onreadystatechange = ajaxResponse;
            req.open("GET", uri, true);
            req.send();
        }

        // Google IO API request.
        function gioResponse(obj) {
            parseInfo(obj.text);
            gadgets.window.adjustHeight();
        }
        function gioRequestInfo() {
            var params = {};
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
            gadgets.io.makeRequest(uri, gioResponse, params);
        }

        ajaxRequestInfo();
        //gioRequestInfo();
    </script>
    <style type="text/css">
        #listbox
        {
            display: block;
            padding: 1px 0px;
            background-image: url('http://steam-dod.googlecode.com/svn/trunk/blue-shad.png');
            background-repeat: repeat-x;
            background-color: #8bb9e0;
        }
        
        #steamlogo
        {
            text-align: right;
            height: 38px;
            background: #444444;
            background-image: url('http://steam-dod.googlecode.com/svn/trunk/steam.png');
            background-repeat: no-repeat;
        }
        
        br[clear=all]
        {
            clear: both;
            display: none;
        }
        body
        {
            padding: 0px;
            margin: 0px;
        }
        img
        {
            border: none;
        }
        
        .tab_row
        {
            display: block;
            position: relative;
            height: 45px;
            margin: 4px;
            padding: 0px;
        }
        .even
        {
            background: #1f1f1f;
        }
        .odd
        {
            background: #1a1a1a;
        }
        .tab_desc
        {
            display: none;
        }
        
        
        .tab_overlay
        {
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 100;
        }
        .tab_overlay img
        {
            width: 100%;
            height: 100%;
        }
        .tab_item_img
        {
            height: 45px;
        }
        .tiny_cap_img
        {
        }
        .tab_discount
        {
            position: absolute;
            left: 120px;
            top: 0px;
            height: 45px;
            line-height: 45px;
            padding: 0px 8px;
            color: white;
            background: #4C6B22;
            font-family: Sans-Serif;
            font-weight: bold;
        }
        .tab_price
        {
            position: absolute;
            right: 4px;
            top: 0px;
            line-height: 22.5px;
            color: #bbbbbb;
            font-family: Sans-Serif;
        }
    </style>
</head>
<body>
    <div style="width: 100%;">
        <div>
            <div id="listbox">
                <div class="tab_row even">
                    <div class="tab_item_img">
                        <img class="tiny_cap_img" />
                    </div>
                    <div class="tab_discount">
                        -76%
                    </div>
                    <div class="tab_price">
                        line1<br />
                        line2
                    </div>
                </div>
            </div>
            <a href="http://store.steampowered.com/" target="_blank">
                <div id="steamlogo">
                </div>
            </a>
        </div>
    </div>
</body>
</html>
